/*
 * @Descripttion: 
 * @Author: 人生只如初见
 * @Date: 2021-09-24 13:46:35
 * @LastEditors: 人生只如初见
 * @LastEditTime: 2021-09-27 16:30:49
 */
import * as THREE from "three";
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
import Calculate from './calculate'
import { screenToThree } from '../../utils'
import { AddMeshCommand } from '../../commands'
/** 直线道路 */
export class RoadDraw extends Calculate {
  constructor(editor) {
    super(editor)
    this.name = '多点直线';
    this.isMoved = false  // 是否在移动状态
    this.initMoveDraw = false  // 是否是初始移动绘制
    this.clickPointsArray = []
  }
  drawPoint(points) {
    let pointGeometry = new THREE.BufferGeometry()
    // points = points.reduce((pre, next) => {
    //   pre.push(next.x, next.y, 0)
    //   return pre
    // }, [])
    console.log('points',points);
    pointGeometry.setFromPoints(points)
    let pointMesh = new THREE.Points(pointGeometry, this.pointMaterial)
    pointMesh.name = '编辑点'
    return pointMesh
  }
  /** 绘制线 */
  drawLine(points) {
    let points1 = points.reduce((pre, next) => {
      pre.push(next.x, next.y, 0)
      return pre
    }, [])
    this.lineMesh.geometry.dispose()
    let geometry = new LineGeometry()
    geometry.setPositions(points1)
    this.lineMesh.geometry = geometry
  }
  /** 绘制面 */
  drawPlane(points) {
    this.roadMesh.geometry.dispose()
    let pointsData = this.getSharpCornerPoint(points, 1)
    let shape = new THREE.Shape(pointsData);
    let shapeGeometry = new THREE.ShapeBufferGeometry(shape);
    this.roadMesh.geometry = shapeGeometry
  }
  /**
   * @function: 监听事件
   */
  listen() {
    this.editor.container.addEventListener('click', this.handleClick)
    this.editor.container.addEventListener('contextmenu', this.complete)
  }
  /**
   * @function: 销毁事件
   */
  dispose() {
    super.dispose()
    this.initMoveDraw = false
    this.clickPointsArray = []
    this.editor.useCommand.dispose('drawComplete')
    this.editor.container.removeEventListener('click', this.handleClick)
    this.editor.container.removeEventListener('pointermove', this.handleMouseMove)
    this.editor.container.removeEventListener('contextmenu', this.complete)
    this.editor.setState('none')
  }

  handleClick = (event) => {
    let [x, y] = screenToThree(event, this.editor)
    let v2 = new THREE.Vector2(x, y)
    if (this.isMoved) {
      this.clickPointsArray.splice(-1, 1, v2)
      this.isMoved = false
    } else {
      this.clickPointsArray.push(v2)
    }
    this.editor.container.addEventListener('pointermove', this.handleMouseMove)
  }
  handleMouseMove = (event) => {
    let [x, y] = screenToThree(event, this.editor)
    let v2 = new THREE.Vector2(x, y)
    // 添加点位
    if (!this.isMoved) {
      this.clickPointsArray.push(v2)
      this.isMoved = true
    } else {
      this.clickPointsArray.splice(-1, 1, v2)
    }
    // 绘制mesh
    if (!this.initMoveDraw) {
      super.listen()  // 创建线mesh和道路mesh
      let _self = this
      this.editor.registryCommand({ // 注册快捷键
        name: 'drawComplete',
        keyboard: ['enter'],
        execute: () => {
          _self.complete()
        }
      })
      this.initMoveDraw = true
    }
    this.drawLine(this.clickPointsArray)
    this.drawPlane(this.clickPointsArray)
    this.editor.update()
  }
  complete = () => {
    this.clickPointsArray.splice(-1)
    if (this.clickPointsArray.length > 1) {
      this.drawLine(this.clickPointsArray)
      this.drawPlane(this.clickPointsArray)
      let roadMesh = this.roadMesh.clone()
      let lineMesh = this.lineMesh.clone()
      roadMesh.userData = {
        points: this.clickPointsArray
      }
      let RoadGroup = new THREE.Group()
      RoadGroup.add(roadMesh, lineMesh)
      RoadGroup.name = '道路分组'
      this.editor.removeMesh(this.roadMesh)
      this.editor.removeMesh(this.lineMesh)
      this.isMoved = false
      this.editor.execute(new AddMeshCommand(RoadGroup))
      console.log('===',this.editor.scene);
      
    }
    this.dispose()
  }
}
